<template>  
	<view class="forgot-password-page">  
		<view class="container">  
			<view class="title">找回密码</view>  
			<view class="input-group">  
				<input class="input" type="text" v-model="phoneNumber" placeholder="请输入您的手机号" />  
			</view>     
			<view class="input-group flex-row">    
				<input class="input" type="text" v-model="verificationCode" placeholder="请输入验证码" />    
				<button class="btn" @click="getVerificationCode">获取验证码</button>    
			</view>  
			<view class="input-group">  
				<input class="input" type="password" v-model="newPassword" placeholder="请输入新密码" />  
			</view>   
			<view class="input-group">  
				<input class="input" type="password" v-model="confirmPassword" placeholder="请确认新密码" />  
			</view>   
			<button class="btn" @click="resetPassword" :disabled="!phoneNumber || !verificationCode || !newPassword || newPassword !== confirmPassword">重置密码</button>  
		</view>  
	</view>  
</template>

<script>  
export default {  
    data() {  
        return {  
            phoneNumber: '',  
            verificationCode: '',  
            newPassword: '',  
            confirmPassword: '',  
            // 用于显示验证码发送状态的变量  
            verificationCodeSent: false,  
            // 用于显示密码重置状态的变量  
            passwordResetSuccess: false  
        }  
    },  
    methods: {  
        getVerificationCode() {  
            if (!this.phoneNumber) {  
                uni.showToast({  
                    title: '请输入手机号',  
                    icon: 'none'  
                });  
                return;  
            }  
            // 模拟向后端发送请求发送验证码  
            uni.request({  
                url: '',  
                method: 'POST',  
                data: {  
                    phoneNumber: this.phoneNumber  
                },  
                success: (res) => {  
                    if (res.data.code === 200) { // 假设后端返回200表示成功  
                        this.verificationCodeSent = true;  
                        uni.showToast({  
                            title: '验证码已发送',  
                            icon: 'success'  
                        });   
                    } else {  
                        uni.showToast({  
                            title: '验证码发送失败',  
                            icon: 'none'  
                        });  
                    }  
                },  
                fail: (err) => {  
                    uni.showToast({  
                        title: '网络请求失败',  
                        icon: 'none'  
                    });  
                }  
            });  
        },  
        resetPassword() {  
            if (!this.phoneNumber || !this.verificationCode || !this.newPassword || this.newPassword !== this.confirmPassword) {  
                uni.showToast({  
                    title: '请输入完整且正确的信息',  
                    icon: 'none'  
                });  
                return;  
            }  
            // 验证通过，模拟向后端发送重置密码请求 
            uni.request({  
                url: '', // 替换为你的后端接口地址  
                method: 'POST',  
                data: {  
                    phoneNumber: this.phoneNumber,  
                    verificationCode: this.verificationCode,  
                    newPassword: this.newPassword  
                },  
                success: (res) => {  
                    if (res.data.code === 200) { // 假设后端返回200表示成功  
                        this.passwordResetSuccess = true;  
                        setTimeout(() => {  
                            // 假设延迟一段时间后跳转到登录页面  
                            uni.navigateTo({  
                                url: '/pages/login/login' // 替换为你的登录页面路径  
                            });  
                        }, 2000); // 延迟2秒  
                        uni.showToast({  
                            title: '密码重置成功',  
                            icon: 'success'  
                        });  
                    } else {  
                        uni.showToast({  
                            title: '密码重置失败',  
                            icon: 'none'  
                        });  
                    }  
                },  
                fail: (err) => {  
                    uni.showToast({  
                        title: '网络请求失败',  
                        icon: 'none'  
                    });  
                }  
            });  
        }  
    },  
}  
</script>

<style>  
    .forgot-password-page {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        height: 100vh;  
        padding: 20px;  
        background-color: #f6fdff;  
        box-sizing: border-box;  
        margin: 0;  
        width: 100%;  
    }  
  
    .container {  
        padding: 20px;  
        background-color: #e0faff;  
        width: 350px;  
        border-radius: 20px;  
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
        max-width: 100%;  
    }  
  
    .input-group {  
        width: 100%; 
        height: 50px; 
        background: #d0dfe8;  
        border-radius: 20px;  
        box-sizing: border-box;  
        padding: 0 10px; 
        margin-top: 25px;  
		margin-bottom: 25px;
        display: flex; 
        align-items: center;  
    }  
  
    .input-group .input {  
        flex: 1;   
        height: 100%;  
        border: none; 
        border-radius: 20px; 
        padding: 0 10px; 
        box-sizing: border-box;  
    }  
  
    .input-group .btn {  
        margin-left: 10px;  
        height: 100%; 
        border-radius: 20px;   
    }  
  
    /* 标题和其他样式可以继续添加 */  
    .title {  
        text-align: center;  
        margin-bottom: 20px;  
    }  
  
    .btn {  
        display: flex;   
        justify-content: center;
        align-items: center;   
        padding: 10px 20px;  
        border: none;  
        border-radius: 20px;  
        background-color: #c1e1ff; 
        color: white;  
        cursor: pointer;   
		height: 50px;
    }  
  
    /* 禁用按钮的样式 */  
    .btn:disabled {  
        background-color: #999; /* 禁用时背景色变暗 */  
        cursor: not-allowed;  
    }  
</style>
